<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理页面</title>
    <link rel="stylesheet" type="text/css" href="./js/jquery-easyui-1.7.0/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/jquery-easyui-1.7.0/themes/icon.css">
    <script type="text/javascript" src="./js/jquery-easyui-1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
</head>
<body>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"
   onclick="openClient()">打开客户端</a>
<table id="dg" class="easyui-datagrid" title="URL列表" style="width:800px;height:auto"></table>

<div id="tb" style="height:auto">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"
       onclick="append()">新增</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true"
       onclick="reload()">刷新</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"
       onclick="accept()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true"
       onclick="reject()">撤销</a>
</div>

<script>
    let editIndex = undefined;
    // let urlContext = "http://localhost:8180";
    let urlContext = "";
    $(function () {
        // 加载表格
        $('#dg').datagrid({
            url: urlContext + "/electron/electronUrl/list",
            method: "get",
            striped: true,
            singleSelect: true,
            onClickRow: onClickRow,
            toolbar: '#tb',
            columns: [[
                {
                    field: "id",
                    title: "ID",
                    width: 100
                },
                {
                    field: "url",
                    title: "URL",
                    width: 500,
                    editor: {
                        type: "textbox"
                    }
                },
                {
                    field: "title",
                    title: "标题",
                    width: 100,
                    editor: {
                        type: "textbox"
                    }
                },
                {
                    field: 'operation',
                    title: "操作",
                    width: 100,
                    formatter: function (value, row, index) {
                        let str = "<button onclick='removeit(" + row.id + ")'>删除</button>";
                        return str;
                    }
                },
            ]]
        })
    })

    function endEditing() {
        if (editIndex == undefined) {
            return true
        }
        if ($('#dg').datagrid('validateRow', editIndex)) {
            $('#dg').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }

    function onClickRow(index) {
        if (editIndex != index) {
            if (endEditing()) {
                $('#dg').datagrid('selectRow', index)
                    .datagrid('beginEdit', index);
                editIndex = index;
            } else {
                $('#dg').datagrid('selectRow', editIndex);
            }
        }
    }

    function append() {
        if (endEditing()) {
            $('#dg').datagrid('appendRow', {});
            editIndex = $('#dg').datagrid('getRows').length - 1;
            $('#dg').datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
        }
    }

    function removeit(id) {
        $.ajax({
            url: urlContext + "/electron/url/delete?id=" + id,
            type: "get",
            success: function (resp) {
                $.messager.show({title: '提示信息', msg: resp.message, showType: 'show', timeout: 1000});
                $('#dg').datagrid('reload');
            }
        })
    }

    function accept() {
        if (endEditing()) {
            $('#dg').datagrid('acceptChanges');
            const currentData = $('#dg').datagrid('getData').rows;

            $.ajax({
                url: urlContext + "/electron/insertAndUpdate",
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(currentData),
                success: function (resp) {
                    $.messager.show({title: '提示信息', msg: resp.message, showType: 'show', timeout: 1000});
                    // 刷新
                    $('#dg').datagrid('reload');
                }
            })
        }
    }

    function reload() {
        $('#dg').datagrid('reload');
        editIndex = undefined;
    }

    function reject() {
        $('#dg').datagrid('rejectChanges');
        editIndex = undefined;
    }

    function openClient() {
        $.ajax({
            url: urlContext + "/electron/start",
            type: "get",
            success: function(resp) {
                $.messager.show({title: '提示信息', msg: resp.message, showType: 'show', timeout: 1000});
            }

        })
    }


</script>
</body>
</html>